<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.5.2/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap-fileinput/5.1.0/css/fileinput.min.css}"/>
    <script type="text/javascript" th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/4.5.2/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap-fileinput/5.1.0/js/locales/zh.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap-fileinput/5.1.0/js/fileinput.min.js}"></script>
</head>
<body>
<div class="container">

    <div class="row">
        <div class="col-md-4">
            <input id="fileInput" name="file" class="form-control" type="file">
        </div>
        <div class="col-md-4">
            <div class="card" >
                <img class="card-img-top" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">预览</h5>
                    <p class="card-text">图片上传之后会在此处显示</p>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script>

$(function(){
    initFileInput("fileInput","/file/avatar")
})

//初始化fileinput控件（第一次初始化）
function initFileInput(ctrlName, uploadUrl) {
 var control = $('#' + ctrlName);
 control.fileinput({
 language: 'zh', //设置语言
 uploadUrl: uploadUrl, //上传的地址
 allowedFileExtensions : ['jpg', 'png'],//接收的文件后缀
 showUpload: false, //是否显示上传按钮
 showCaption: false,//是否显示标题
 browseClass: "btn btn-primary", //按钮样式
 previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
 })
 .on("fileuploaded",function (event, data, previewId, index) {
    $("img").attr("src",data.response.src)
 })

}


</script>
</html>